<template>
    <div>
<!--        使用时不加this-->
<!--        打印结果为66    修改后为88-->
        {{$store.state.num}}
<!--        打印结果为131   修改后为175-->
        {{$store.getters.num2}}
        {{$store.state.moudelA.numA}}

<!--        添加点击事件-->
        <button @click="change">修改vuex</button>

        <button @click="asyncChange">异步修改vuex</button>
    </div>
</template>

<script>
    export default {
        name: "vuex",
        created(){
            //num所在位置this.$store.state
            console.log(this.$store.state.num)
            //处理后数据num2在$store.getters中
            console.log(this.$store)
            console.log(this.$store.state.moudelA.numA)
            console.log(this.$store.state.moudelA)
        },
        methods:{
            change(){
                //两个参数（方法名，参数payload/一般为对象）
                //传参num为88
                this.$store.commit('changeNum',{num:88})
            },
            asyncChange(){
                console.log(this.$store)
                this.$store.dispatch('asyncChangeNum',{num:111})
            }
        }

    }
</script>

<style scoped>

</style>